<template>
  <div class="app-container">
    <!--工具栏-->
    <el-card
      shadow="hover"
      class="maBt15"
      v-if="checkPermission(['deposit@index']) && $store.state.user.queryShow"
    >
      <el-form inline>
        <!-- 收款名称 -->
        <el-form-item :label="$t('depositManagement.depositManagement1')">
          <el-input
            v-model="formInline.name"
            clearable
            :placeholder="$t('depositManagement.depositManagement1')"
            style="width: 150px"
            class="filter-item"
          />
        </el-form-item>
        <!-- 收款类型 -->
        <el-form-item :label="$t('depositManagement.depositManagement2')">
          <el-select
            v-model="formInline.type"
            :placeholder="$t('common.common7')"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in shoukuanMode"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 收款人账号 -->
        <el-form-item :label="$t('depositManagement.depositManagement3')">
          <el-input
            v-model="formInline.account"
            clearable
            :placeholder="$t('depositManagement.depositManagement3')"
            style="width: 150px"
            class="filter-item"
          />
        </el-form-item>
        <el-button class="filter-item" type="primary" @click="toQuery">{{
          $t("common.common4")
        }}</el-button>
      </el-form>
    </el-card>
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <!--  批量删除-->
        <el-button
          type="danger"
          @click="delList()"
          :disabled="dataListSelections.length == 0"
          v-permission="['deposit@delete']"
          >{{ $t("common.common12") }}</el-button
        >
        <!-- 新建 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="toAddEdit()"
          v-permission="['deposit@save']"
          >{{ $t("common.common18") }}</el-button
        >
        <query-btn />
      </div>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
        highlight-current-row
        @selection-change="selectionChangeHandle"
        :max-height="$store.state.app.tableHeight"
        v-permission="['deposit@index']"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          minWidth="50"
          fixed="left"
        ></el-table-column>
        <el-table-column prop="id" width="100" fixed="left" label="ID" />
        <!-- 收款名称 -->
        <el-table-column
          prop="name"
          min-width="170"
          :label="$t('depositManagement.depositManagement1')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["name_" + $store.state.settings.langTail]
            }}</span>
          </template>
        </el-table-column>
        <!-- 收款类型 -->
        <el-table-column
          prop="type"
          min-width="150"
          :label="$t('depositManagement.depositManagement2')"
        >
          <template slot-scope="scope">
            {{ scope.row.type | release(shoukuanMode) }}
          </template>
        </el-table-column>
        <!-- 收款人姓名 -->
        <el-table-column
          prop="payee"
          min-width="170"
          :label="$t('depositManagement.depositManagement4')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["payee_" + $store.state.settings.langTail]
            }}</span>
          </template>
        </el-table-column>
        <!-- 收款人账号 -->
        <el-table-column
          prop="account_zh"
          min-width="200"
          :label="$t('depositManagement.depositManagement3')"
        >
          <!-- <template slot-scope="scope">
            <span>{{
              scope.row["account_" + $store.state.settings.langTail]
            }}</span>
          </template> -->
        </el-table-column>
        <!-- 收款人国家/地区/城市 -->
        <el-table-column
          prop="city"
          min-width="200"
          :label="$t('depositManagement.depositManagement5')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["city_" + $store.state.settings.langTail]
            }}</span>
          </template>
          <!-- 收款人地址 -->
        </el-table-column>
        <el-table-column
          prop="address"
          min-width="200"
          :label="$t('depositManagement.depositManagement6')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["address_" + $store.state.settings.langTail]
            }}</span>
          </template>
        </el-table-column>
        <!-- 收款行SWIFT代码 -->
        <el-table-column
          prop="swift_zh"
          min-width="180"
          :label="$t('depositManagement.depositManagement7')"
        >
          <!-- <template slot-scope="scope">
            <span>{{
              scope.row["swift_" + $store.state.settings.langTail]
            }}</span>
          </template> -->
        </el-table-column>
        <!-- 收款开户银行全称 -->
        <el-table-column
          prop="bank_name"
          min-width="250"
          :label="$t('depositManagement.depositManagement8')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["bank_name_" + $store.state.settings.langTail]
            }}</span>
          </template>
        </el-table-column>
        <!-- 转账附言 -->
        <el-table-column
          prop="adjunct"
          min-width="200"
          :label="$t('depositManagement.depositManagement9')"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row["adjunct_" + $store.state.settings.langTail]
            }}</span>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column
          prop="status"
          min-width="100"
          :label="$t('common.common19')"
        >
          <template slot-scope="scope">
            <div
              class="switch"
              @click="
                switchClick(scope.row, checkPermission(['deposit@switchStatus']))
              "
              :class="checkPermission(['deposit@switchStatus']) ? '' : 'disabled'"
            >
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="2"
                disabled
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <!--   操作   -->
        <el-table-column
          :label="$t('common.common15')"
          min-width="120px"
          align="center"
          fixed="right"
          class-name="iconBtn"
          v-if="checkPermission(['deposit@read', 'deposit@delete'])"
        >
          <template slot-scope="scope">
            <span
              @click="toAddEdit(scope.row.id)"
              v-permission="['deposit@read']"
            >
              <!-- 编辑 -->
              <btn-tip
                :content="$t('common.common20')"
                type="primary"
                icon="el-icon-edit"
              ></btn-tip>
            </span>
            <span
              @click="delList(scope.row.id)"
              v-permission="['deposit@delete']"
            >
              <!-- 删除 -->
              <btn-tip
                :content="$t('common.common9')"
                type="danger"
                icon="el-icon-delete"
              ></btn-tip>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination
        v-permission="['deposit@index']"
        :total="tableShow.listCount"
        :page.sync="tableShow.currentPage"
        :page-size.sync="tableShow.pageSize"
        @pageChange="getList"
      />
    </el-card>
    <!--表单渲染-->
    <add-edit ref="add_edit" />
  </div>
</template>

<script>
import AddEdit from "./add_edit";
import {
  getCusList,
  ChangeSwitch,
  deleteItem,
} from "@/api/systems/depositManagement";
import { shoukuanMode } from "@/assets/js/common";

export default {
  components: {
    AddEdit,
  },
  data() {
    return {
      loading: false,
      shoukuanMode,
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0,
      },
      tableData: [],
      formInline: {
        name: "",
        type: "",
        account: "",
      },
      dataListSelections: [], //多选
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    toQuery() {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getCusList(
        Object.assign({}, this.formInline, {
          page: this.tableShow.currentPage,
          limit: this.tableShow.pageSize,
        })
      )
        .then((res) => {
          if (res.code == 10000) {
            this.tableData = res.data;
            this.loading = false;
            this.tableShow.listCount = res.count;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    switchClick(row, disabled) {
      // 暂无修改权限!
      if (!disabled) {
        this.$message({
          showClose: true,
          message: this.$t("common.common21"),
          type: "warning",
        });
        return false;
      }
      // var statusTitle = row.status == 1 ? "禁用" : "启用";
      var statusTitle =
        row.status == 1
          ? this.$t("common.common22")
          : this.$t("common.common23");
      // 是否
      this.$confirm(this.$t("common.common25") + statusTitle, statusTitle, {
        confirmButtonText: this.$t("common.common2"),
        cancelButtonText: this.$t("common.common1"),
        type: row.status == 1 ? "warning" : "success",
      })
        .then(() => {
          ChangeSwitch(row.id).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消
            message: this.$t("common.common24"),
          });
        });
    },
    delList(id) {
      var userIds = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        // `确定对[id=${userIds.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        // "确定删除？",
        `${this.$t("common.common13")}[id=${userIds.join(",")}]${this.$t(
          "common.common14"
        )}[${
          id ? this.$t("common.common9") : this.$t("common.common12")
        }]${this.$t("common.common15")}?`,
        this.$t("common.common10"),
        {
          confirmButtonText: this.$t("common.common2"),
          cancelButtonText: this.$t("common.common1"),
          type: "warning",
        }
      )
        .then(() => {
          deleteItem(userIds.join(",")).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消删除
            message: this.$t("common.common11"),
          });
        });
    },
    toAddEdit(rowID) {
      this.$refs.add_edit.init(rowID);
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>